/* 导航菜单 */

$(function () {
  // 设置本地存储，记录激活的导航菜单 
  if (!sessionStorage.getItem('activeMenu')) {
    sessionStorage.setItem('activeMenu', "0-0");
  }

  // 因为每一个静态页面，跳转之后，都会重新渲染导航，所以要重新绑定导航索引。
  let arr = $(".menu > li");
  arr.each(function (i, item) {
    // 1. 设置一个内联的高度,动态设置所有导航菜单中LI的高度，才可以增加折叠的动画效果。
    $(item).css('height', $(item).height() + 'px')
    // 2. 设置一级导航的索引号
    $(item).attr('data-index', i);

    // 3. 添加索引号，如果是动态导航菜单，这可以不加。
    $(item).children().each((i2, item) => {
      // console.log(i2);
      //3.1 设置二级导航索引号
      $(item).attr('data-index', i + '-' + i2)
      //3.2 给每一个DIV子菜单，添加一个单击事件，
      $(item).on('click', function (e) {
        // e.preventDefault();
        //3.2.1 获取本地存储中，上一次点击的导航菜单的索引,通过循环找到后，清除激活样式
        let str = sessionStorage.getItem('activeMenu');
        $('.menu div').each((i, item) => {
          // 如果你点的是一级导航，就不取消二级导航的激活样式，只有当点的是二级导航时，并且DIV的data-index与本地存储相等时，才取消激活样式
          if ( $(this).attr('data-index').split('-')[1] !== '0' && $(item).attr('data-index') === str) {
            $(item).removeClass('active')
          }
        })
        // 3.2.2 记录当前点击的导航菜单的索引

        sessionStorage.setItem('activeMenu', $(this).attr('data-index'))
        // 3.2.3 设置激活的样式, 一级导航不用添加
        if (str.split('-')[1] !== '0') {
          $(this).addClass('active') 
        }

      })
    })
  })

  // 在每个页面设置好索引号后，再去拿本地存储的值，再设置激活的导航。
  let str = sessionStorage.getItem('activeMenu');
  $('.menu div').each((i, item) => {
    if ($(item).attr('data-index') === str) {
      $(item).addClass('active')
    }
  })
});

// 2. 展开或折叠导航
$(".menu div:first-child").on('click', function () {

  // 获取LI的高度
  let height = $(this).parent().height();
  // $(this).parent().css({ height: height + 'px' })

  // 控制三角形，通过判断LI高度，调整icon状态
  let angleDown = $(this).find('.fa-angle-down');
  height !== 50 ? angleDown.css('transform', 'rotate(180deg)') : angleDown.css('transform', 'rotate(0deg)')

  // 修改为展开或者折叠
  let len = $(this).parent().children().length;
  height = height !== 50 ? 50 + 'px' : height * len + 'px';
  $(this).parent().css({ height })
});

// 3. 退出系统
$("#exitSystem").on('click', function () {
  sessionStorage.removeItem('userInfo')
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('activeMenu')


  location.href = "./../index.html"
})

// 更新左上角的用户名称。
let username = sessionStorage.getItem('userInfo')  && JSON.parse(sessionStorage.getItem('userInfo') ).uname;
$("#usernickname").text(username);